let titleList = [
  "Which language runs in a web <br>browser?",
  "What does CSS stand for?",
  "What does HTML stand for?",
  "What year was JavaScript <br>launched?",
];
let ansList = [
  ["Java", "C", "Python", "JavaScript"],
  [
    "Central Style Sheets",
    "Cascading Style Sheets",
    "Cascading Simple Sheets",
    "Cars SUVs Sailboats",
  ],
  [
    "Hypertext Markup Language",
    "Hypertext Markdown Language",
    "Hyperloop Machine Language",
    "Helicopters Terminals Motorboats Lamborginis",
  ],
  ["1996", "1995", "1994", "none of the above"],
];
let trueList = ["op4", "op2", "op1", "op2"];
let labels = document.querySelectorAll("label");
let title = document.querySelector(".title");
let btn = document.querySelector("button");
let main = document.querySelector(".main");
let res = document.querySelector(".res");
let yourAns = [];
let flag = true;
let i = 0;
function init(i) {
  title.innerHTML = titleList[i];
  labels.forEach((label, idx) => {
    label.textContent = ansList[i][idx];
  });
}

init(i);

btn.addEventListener("click", () => {
  if (flag) {
    let selectedColor = document.querySelector('input[name="ans"]:checked');
    if (selectedColor === null) return;
    yourAns.push(selectedColor.value);
    selectedColor.checked = false;
    i++;
    if (i < 4) init(i);
    else {
      btn.textContent = "Reload";
      main.style.display = "none";
      res.style.display = "block";
      let n = getN();
      res.textContent = `You answered ${n}/4 questions correctly`;
      flag = !flag;
    }
  } else {
    i = 0;
    init(i);
    yourAns = [];
    main.style.display = "block";
    res.style.display = "none";
    flag = !flag;
  }
});

function getN() {
  let n = 0;
  yourAns.forEach((ans, idx) => {
    if (ans === trueList[idx]) {
      n++;
    }
  });
  return n;
}
